<template>
	<a-modal title="编辑条目" width="80%" :mask-closable="false" :keyboard="false" :visible="visible"
		:confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-form-item v-show="false">
					<a-input v-decorator="['id']" />
				</a-form-item>

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="组织机构" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<!--  <a-select style="width: 100%" placeholder="请选择组织机构" v-decorator="['orgs', {rules: [{ required: true, message: '请选择组织机构！' }]}]">
            <a-select-option v-for="(item,index) in orgData" :key="index" :value="item.code">{{ item.value }}</a-select-option>
          </a-select> -->
						<a-tree-select v-decorator="['orgs', {rules: [{ required: true, message: '请选择组织机构！' }]}]"
							style="width: 100%" :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
							:treeData="orgTree" placeholder="请选择机构" tree-default-expand-all
							@change="e => initrOrgName(e)">
							<span slot="title" slot-scope="{ id }">{{ id }}</span>
						</a-tree-select>
					</a-form-item>
					<a-form-item label="任务类型" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择任务类型" allow-clear @change="e => initrTypeName(e)"
							v-decorator="['type', {rules: [{ required: true, message: '请选择任务类型！' }]}]">
							<a-select-option v-for="(item,index) in xjb_typeData" :key="index" :value="item.code">
								{{ item.value }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-form-item>

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="任务编号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-input placeholder="请输入任务编号"
							v-decorator="['taskcode', {rules: [{ required: true, message: '请输入任务编号！' }]}]" />
					</a-form-item>
					<a-form-item label="任务子类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-input placeholder="请输入任务子类型" v-decorator="['type2']" />
					</a-form-item>
				</a-form-item>

				<a-form-item label="参与人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select
						v-decorator="['manager', {rules: [{ required: true, message: '请选择参与人员！'},{ validator : selecthandleValidatormanager }]}]"
						mode="multiple" style="width: 100%" placeholder="选择参与人员" :showArrow="true" :maxTagCount="10"
						default-active-first-option @change="selecthandleChangemanager">
						<a-select-option v-for="(item,index) in xjb_managerData" :key="index" :value="item.code">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="关联系统" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select v-decorator="['sysids',{rules: [{ required: true, message: '请选择关联系统！' }]}]"
						mode="multiple" style="width: 100%" placeholder="请选择关联系统" :showArrow="true" :maxTagCount="10"
						default-active-first-option>
						<a-select-option v-for="(item,index) in xjb_sysidsData" :key="index" :value="item.code">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item label="任务内容" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-textarea placeholder="请输入任务内容"
						v-decorator="['title',{initialValue:'任务内容'}, {rules: [{required: true, message: '请输入任务内容！'}]}]"
						:auto-size="{ minRows: 4, maxRows: 6 }" />
				</a-form-item>
				<!-- <a-form-item label="任务明细" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-textarea placeholder="请输入任务明细" v-decorator="['content']"
						:auto-size="{ minRows: 3, maxRows: 6 }" />
				</a-form-item> -->

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-date-picker style="width: 100%" placeholder="请选择开始日期"
							v-decorator="['startdate',{rules: [{ required: true, message: '请选择开始日期！' }]}]"
							@change="startdateOnChange" />
					</a-form-item>
					<a-form-item label="结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-date-picker style="width: 100%" placeholder="请选择结束日期"
							v-decorator="['enddate',{rules: [{ required: true, message: '请选择结束日期！' }]}]"
							@change="enddateOnChange" />
					</a-form-item>
				</a-form-item>
				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="目前阶段" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择目前阶段"
							v-decorator="['stage', {rules: [{ required: true, message: '请选择目前阶段！' }]}]">
							<a-select-option v-for="(item,index) in stageData" :key="index" :value="item.code">
								{{ item.value }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="整体进度" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择任务整体进度"
							v-decorator="['process', {rules: [{ required: true, message: '请选择任务整体进度！' }]}]">
							<a-select-option v-for="(item,index) in processData" :key="index" :value="item.code">
								{{ item.value }}
							</a-select-option>
						</a-select>
					</a-form-item>

				</a-form-item>

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="预计上线日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-date-picker style="width: 100%" placeholder="请选择上线日期"
							v-decorator="['product',{rules: [{ required: true, message: '请选择上线日期！' }]}]"
							@change="productOnChange" />
					</a-form-item>
					<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-input placeholder="请输入备注" v-decorator="['note']" />
					</a-form-item>
				</a-form-item>

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="有效性" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择有效性"
							v-decorator="['vflag', {rules: [{ required: true, message: '请选择有效性！' }]}]">
							<a-select-option default-value='0' v-for="(item,index) in vflagData" :key="index"
								:value="item.code">
								{{ item.value }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<!-- <a-form-item label="其他信息" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-input placeholder="请输入其他信息" v-decorator="['others']" />
				</a-form-item> -->
					<a-form-item label="是否关闭" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择是否关闭"
							v-decorator="['complate', {rules: [{ required: true, message: '请选择是否关闭！' }]}]">
							<a-select-option v-for="(item,index) in complateData" :key="index" :value="item.code">
								{{ item.value }}
							</a-select-option>
						</a-select>
					</a-form-item>

				</a-form-item>
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
	import moment from 'moment'
	import {
		xjbSysdetailList
	} from '@/api/modular/main/xjbsysdetail/xjbSysdetailManage'
	import {
		xjbWeeklyAdd,
		xjbWeeklyEdit
	} from '@/api/modular/main/xjbweekly/xjbWeeklyManage'
	import {
		sysDictTypeDropDown
	} from '@/api/modular/system/dictManage'
	import {
		getOrgTree,
		getOrgList
	} from '@/api/modular/system/orgManage'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				stageData: [],
				processData: [],
				complateData: [],
				xjb_sysidsData: [],
				xjb_managerData: [],
				xjb_typeData: [],
				vflagData: [],
				complateData: [],
				orgTree: [],
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					}
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 15
					}
				},
				startdateDateString: '',
				enddateDateString: '',
				productDateString: '',
				visible: false,
				confirmLoading: false,
				form: this.$form.createForm(this)
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		created() {
			this.getxjb_managerData()
			this.getxjbSysdetailList()
			this.getOrgDate()
			this.sysDictTypeDropDown()
		},
		methods: {
			moment,

			getxjbSysdetailList() {
				this.xjb_sysidsData = this.$options.filters['dictData']('xjb_sysdetail')
				//console.log("xjb_sysidsData", this.xjb_sysidsData);
				// xjbSysdetailList().then((res) => {
				// 	this.xjb_sysidsData == res.data
				// 	console.log("xjb_sysidsData",this.xjb_sysidsData );
				// })
			},
			getxjb_managerData() {
				this.xjb_managerData = this.$options.filters['dictData']('xjb_sys_user')
				//console.log("xjb_managerData", this.xjb_managerData);
			},
			// 初始化方法
			edit(record) {
				//console.log("record", record.taskcode, record);
				this.visible = true
				setTimeout(() => {
					this.form.setFieldsValue({
						id: record.id,
						orgs: record.orgs,
						taskcode: record.taskcode,
						type: record.type,
						type2: record.type2,
						title: record.title,
						content: record.content,
						manager: JSON.parse(record.manager),
						sysids: JSON.parse(record.sysids),
						stage: record.stage,
						process: record.process,
						ref: record.ref,
						vflag: record.vflag,
						note: record.note,
						others: record.others,
						complate: record.complate
					})
				}, 100)
				// 时间单独处理
				if (record.startdate) {
					this.form.getFieldDecorator('startdate', {
						initialValue: moment(record.startdate, 'YYYY-MM-DD')
					})
					this.startdateDateString = moment(record.startdate).format('YYYY-MM-DD')
				}
				// 时间单独处理
				if (record.enddate) {
					this.form.getFieldDecorator('enddate', {
						initialValue: moment(record.enddate, 'YYYY-MM-DD')
					})
					this.enddateDateString = moment(record.enddate).format('YYYY-MM-DD')
				}
				// 时间单独处理
				if (record.product) {
					this.form.getFieldDecorator('product', {
						initialValue: moment(record.product, 'YYYY-MM-DD')
					})
					this.productDateString = moment(record.product).format('YYYY-MM-DD')
				}
			},

			/**
			 * 获取字典数据
			 */
			sysDictTypeDropDown() {
				this.formLoading = true

				//目前阶段
				sysDictTypeDropDown({
					code: 'xjb_stageData'
				}).then((res) => {
					this.stageData = res.data
					//console.log(this.stageData)
				})
				//完成率
				sysDictTypeDropDown({
					code: 'xjb_achieving_rate'
				}).then((res) => {
					this.processData = res.data
					//console.log(this.processData)
				})

				//任务类型
				sysDictTypeDropDown({
					code: 'xjb_type_type'
				}).then((res) => {
					this.xjb_typeData = res.data
					//console.log("xjb_typeData", this.xjb_typeData)
				})

				//是否关闭
				sysDictTypeDropDown({
					code: 'yes_or_no'
				}).then((res) => {
					this.complateData = res.data
					//console.log(this.complateData)
				})

				//有效性
				sysDictTypeDropDown({
					code: 'yes_or_no'
				}).then((res) => {
					this.vflagData = res.data
					//console.log(this.vflagData)
				})

				// 组织机构
				sysDictTypeDropDown({
					code: 'menu_type'
				}).then((res) => {
					this.orgsData = res.data
				})

				// 权重
				sysDictTypeDropDown({
					code: 'menu_weight'
				}).then((res) => {
					this.weightData = res.data
				})

				// 内外链
				sysDictTypeDropDown({
					code: 'open_type'
				}).then((res) => {
					this.openTypeData = res.data
					this.formLoading = false
				})
			},

			selecthandleChangemanager(option) {
				// console.log("selecthandleChangemanager", option);
			},
			selecthandleValidatormanager(rule, value, callback) {
				if (value.length > 3) {
					callback('最多选择三项')
				} else {
					callback()
				}
			},
			getOrgDate() {
				getOrgTree().then((res) => {
					this.orgTree = res.data
					//  this.orgData = res.data
				})
				getOrgList().then((res) => {
					this.orgList = res.data
					// this.orgData = res.data
				})
			},

			/**
			 * 选择树机构，初始化机构名称于表单中
			 */
			initrOrgName(value) {
				this.form.getFieldDecorator('orgs', {
					initialValue: this.orgList.find(item => value === item.id).name
				})
			},

			initrTypeName(value) {
				this.form.getFieldDecorator('type', {
					initialValue: this.xjb_typeData.find(item => value === item.code).name
				})
			},

			// initrSysids(value) {
			// 	console.log("initrSysids", value, this.xjb_sysidsData);
			// 	this.form.getFieldDecorator('sysids', {
			// 		initialValue: this.xjb_sysidsData.find(item => value === item.code).name
			// 	})
			// },

			handleSubmit() {
				var that = this
				const {
					form: {
						validateFields
					}
				} = this
				that.confirmLoading = true
				validateFields((errors, values) => {
					if (!errors) {
						for (const key in values) {
							if (typeof(values[key]) === 'object' && values[key] != null) {
								values[key] = JSON.stringify(values[key])
							}
						}
						values.startdate = that.startdateDateString || null
						values.enddate = that.enddateDateString || null
						values.product = that.productDateString || null
						//console.log("values", values.complate)
						if ("Y" == values.complate) {
							that.$confirm({
								title: '提示',
								content: '真的要关闭该任务 ?',
								okText: '确定',
								cancelText: '取消',
								onCancel() {
									that.confirmLoading = false
								},
								onOk: () => {
									return xjbWeeklyEdit(values).then((res) => {
										if (res.success) {
											that.$message.success('编辑成功')
											that.confirmLoading = false
											that.$emit('ok', values)
											that.handleCancel()
										} else {
											that.$message.error('编辑失败') //  + res.message
										}
									}).finally((res) => {
										that.confirmLoading = false
									})
								}
							})
						} else {
							xjbWeeklyEdit(values).then((res) => {
								if (res.success) {
									that.$message.success('编辑成功')
									that.confirmLoading = false
									that.$emit('ok', values)
									that.handleCancel()
								} else {
									that.$message.error('编辑失败') //  + res.message
								}
							}).finally((res) => {
								that.confirmLoading = false
							})
						}
					} else {
						that.confirmLoading = false
					}
				})
			},
			startdateOnChange(date, dateString) {
				this.startdateDateString = dateString
			},
			enddateOnChange(date, dateString) {
				this.enddateDateString = dateString
			},
			productOnChange(date, dateString) {
				this.productDateString = dateString
			},
			handleCancel() {
				this.startdateDateString = ''
				this.form.getFieldDecorator('startdate', {
					initialValue: null
				})
				this.enddateDateString = ''
				this.form.getFieldDecorator('enddate', {
					initialValue: null
				})
				this.productDateString = ''
				this.form.getFieldDecorator('product', {
					initialValue: null
				})
				this.form.resetFields()
				this.visible = false
			}
		}
	}
</script>
